<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import BaseEcharts from '../BaseEcharts.vue';
import {getTopTenIn} from '../../../api/index'
onMounted(()=>{
  getTopTenIn().then(res=>{
    let dd = res.data.map((el:any)=>el.name)
    let ss = res.data.map((el:any)=>el.warehouseNum)
    xList.value = dd;
    yList.value = ss;
    loaded.value = true;
  })
})
const topTen = ref();
let loaded = ref(false);
let xList = ref([]);
let yList = ref([]);
defineProps<{title:string}>();
const topOption = reactive<any>({
   tooltip: {
      show: true,
      trigger: "axis",
      formatter: "{b} : {c}",
   },
   title: {
   },
   legend: {
      show: true,
      icon: 'circle',
      textStyle: {
         color: '#fff'
      }
   },
   grid: {
      top: "15%",
      left: "0",
      right: "0",
      bottom: "5%",
      containLabel: true,
   },
   xAxis: [
      {
         type: "category",
         axisLine: {
            show: false
         },
         axisLabel: {
            interval: 0,
            align: "center",
            margin: 10,
            color: "#a8acae",
            rotate: 0,
            textStyle: {
               fontSize: 14,
            },
            formatter: function (params:any) {
                var val = "";
                // 超过四个字隐藏
                if (params.length > 3) {
                    val = params.substr(0, 3) + '...';
                    return val;
                } else {
                    return params;
                }
            }
         },
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         boundaryGap: true,
         data: xList
      },
   ],

   yAxis: [
      {
         type: "value",
         axisLine: {
            show: false
         },
         splitLine: {
            show: false,
            lineStyle: {
               color: "rgba(27, 117, 194,.2)",
               type: "dashed",
            },
         },
         axisLabel: {
            show: false,
            interval: 2,
            textStyle: {
               color: "#a8acae",
               fontSize: 16
            }
         },
         axisTick: {
            show: false,
         },
      },
   ],
   series: [
      {
         type: 'line',
         label: {
            show: true,
            position: 'top',
            textStyle: {
               color: "#fff"
            }
         },
         showSymbol: true,
         symbolSize: 8,
         symbol: "emptyCircle",
         itemStyle: {
            color: "transparent",
            borderColor: '#1b75c2',
            borderWidth: 2,
         },
         data: yList
      },
      {
         type: 'bar',
         barWidth: 0.5,
         itemStyle: {
            normal: {
               color: 'transparent',
               borderColor: '#1b75c2', // 设置边框颜色
               borderWidth: 3, // 设置边框宽度
               borderType: 'dotted' // 设置边框为虚线
            }
         },
         data: yList
      }
   ]
})


</script>

<template>
  <div class="toptitlemain centered-gradient" ref="topTen">
    <div class="bx-title">
      {{ title }}
    </div>
    <BaseEcharts v-if="loaded" :options="topOption" height="100%"></BaseEcharts>
  </div>
</template>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}

.toptitlemain{
  width: 100%;
  height: 34vh;
  display: flex;
  border: 1px solid rgb(92, 98, 107);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 0 1vw;
  box-sizing:border-box;
  color: rgb(192, 215, 255);
  margin: .5vh 0;
  flex-direction: column;
}
.bx-title{
   font-size: 16px;
}
</style>
